<!DOCTYPE html>
<html lang="zh">
<head>
    <meta charset="utf-8">
    <meta name="viewport" content="width=device-width, initial-scale=1, maximum-scale=1, user-scalable=no"/>
    <meta name="mobile-web-app-capable" content="yes">
    <meta name="apple-mobile-web-app-capable" content="yes">
    <meta name="apple-touch-fullscreen" content="yes">
    <meta name="full-screen" content="yes">
    <meta name="apple-mobile-web-app-status-bar-style" content="default">
    <meta name="screen-orientation" content="portrait">
    <meta name="browsermode" content="application">
    <meta name="msapplication-tap-highlight" content="no">
    <meta name="x5-orientation" content="portrait">
    <meta name="x5-fullscreen" content="true">
    <meta name="x5-page-mode" content="app">
    <title>会员登录</title>
    <link href="/static/admin/css/bootstrap.min.css" rel="stylesheet">
    <script type="text/javascript" src="/static/admin/js/jquery.min.js"></script>
    <script type="text/javascript" src="/static/admin/js/cookie.min.js"></script>
    <script type="text/javascript" src="/static/common/js/common.js"></script>
    <style>
        .container-fluid {
            padding-top: 20px;
        }

        div.qr {
            position: relative;
            height: 150px;
            width: 150px;
        }

        div.qr img {

        }

        div.qr div {
            vertical-align: middle;
            position: absolute;
            top: 0;
            bottom: 0;
            background-color: rgba(0, 0, 0, 1);
            left: 0;
            color: #fff;
            right: 0;
            line-height: 150px;
            text-align: center;
        }
    </style>
</head>
<body>
<div class="container-fluid">
    <form class="form-horizontal" id="form" action="{:addons_url('authusers://Index/login')}" method="post">
        <input type="hidden" id="cuid" name="cuid" value=""/>
        <input type="hidden" id="platform" name="platform" value=""/>
        <input type="hidden" id="sid" name="sid" value="{$sid}"/>
        <div class="form-group">
            <div class="radio col-xs-12">
                {foreach $types as $value}
                <label>
                    <input type="radio" name="type" value="{$value['value']}" {$value['checked']} />
                    {$value['name']}
                </label>
                {/foreach}
                <div class="help-block">登录类型</div>
            </div>
        </div>
        <div class="auth-qrcode-container {if $types[0]['value'] != 2} hide {/if}">
            <p>请扫描下方二维码</p>
            <div class="qr">
                <div id="qrLoading">读取中...</div>
                <img src="###" id="qrcode" height="150" width="150"/>
            </div>
            <p><a id="qr_error" style="display:none;" target="_self" href="javascript:;">刷新重试</a></p>
        </div>
        <div class="auth-container {if $types[0]['value'] == 2} hide {/if} ">
            <div class="form-group">
                <label class="col-xs-12" for="username">用户帐号</label>
                <div class="col-xs-12">

                    <input class="form-control" type="text" id="username" name="username" required>


                    <div class="help-block">请输入您的帐号</div>
                </div>
            </div>

          <!--  <div class="form-group">
                <label class="col-xs-12" for="userpass">密码</label>

                <div class="col-xs-12">
                    <input class="form-control" type="text" id="userpass" name="userpass" required>
                    <div class="help-block">密码</div>
                </div>

            </div>-->

            <div class="form-group">
                <label class="col-xs-12" for="usercode">验证码</label>

                    <div class="col-xs-12">
                        <div class="input-group">
                        <input class="form-control" type="text" id="usercode" name="usercode" required>
                    <div class="input-group-btn">
                        <button type="button" id="sendcode" class="btn btn-default">发送验证码</button>
                    </div>
                    </div>
                        <div class="help-block">请输入您的验证码</div>
                </div>
            </div>

            <div class="form-group">
                <div class="col-xs-12">
                    <button class="btn btn-primary" id="submit" type="button">立即登录</button>
                    <!--                    <a href="{:addons_url(':authusers//Index/register')}" class="btn">没有帐号？立即注册</a>-->
                </div>
            </div>
        </div>
    </form>
</div>
<script src="/static/common/layer35/layer.js"></script>
<script>
    //console.log( $local );
    var sid, isMini;
    var qrTimer;
    var sendTimer;
    var IM_config = {
        hook:"{:url('api/Hook/index')}",
    }
    //console.log( parent.miniChat.getConfig() ) ;

    $(function () {

        function sendtime(time){

            if( !time ){
                return ;
            }

            sendTimer && clearTimeout(sendTimer);
            $("#sendcode").attr('disabled',true).text(time+'秒再次发送');
            sendTimer = setInterval(function(){
                time--;
                if( time <= 0 ){
                    $("#sendcode").attr('disabled',false).text('点击发送');
                    clearInterval(sendTimer);
                    return ;
                }
                $("#sendcode").text(time+'秒再次发送');

            },1000)
        }

        $("#sendcode").on('click',function(){

            var type = $("input[name='type']:checked").val() ;
            var username = $("#username").val();
            if( !username ){
                layer.msg('请输入帐号');
                return ;
            }
            $("#sendcode").attr('disabled',true).text('发送中...');
            hook('user_login_sms', JSON.stringify({mobile:username,type:type}) ,1,function(res){
                console.log(res);
                if(res.code != 200 ){
                    layer.msg(res.data);
                    $("#sendcode").attr('disabled',false).text('点击发送');
                }else if( res.code == -1){
                    layer.msg('调用失败-1');
                }

                sendtime(res.next_time);
            })
        })

        if ($("input[name='type']").val() == 2) {
            getQr();
        }

        $("input[name='type']").on('change', function () {
            //console.log( parent.miniChat.getConfig() );
            if ($(this).val() == 2) {
                getQr();
                $(".auth-container").addClass('hide');
                $(".auth-qrcode-container").removeClass('hide');
            } else {
                $(".auth-qrcode-container").addClass('hide');
                $(".auth-container").removeClass('hide');
            }
        });

        // 获取参数
        function getQrParams() {
            var ofromid, cuid;
            // console.log(parent.youke_info);
            if (parent.miniChat) {
                ofromid = parent.miniChat.getConfig().ykinfo.from_id;
                cuid = parent.miniChat.getConfig().kfinfo.to_id;
            } else {

                ofromid = parent.youke_info.from_id;
                cuid = parent.kefu_info.to_id;
            }

            return {
                ofromid: ofromid,
                cuid: cuid
            }
        }

        $("#qr_error").on('click',function(){
            parent.location.reload();
        });

        function getWsState(){
            return parent.miniChat ? parent.miniChat.getWsState() : parent.WS.readyState ;
        }

        function getQr() {
            var maxTime = 30 * 1000 ;
            var params = getQrParams();
            qrTimer && clearTimeout(qrTimer);
            $("#qrLoading").show();
            $.get("{:url('members/Index/qr')}", params, function (data) {
                console.log(data);
                if (data.code == 200) {
                    $("#qrcode").attr('src', data.data);
                    var currentTime = 200 ;
                    //var WSConnection = parent.miniChat ? parent.miniChat.getWsState() : parent.WS.readyState ;

                    qrTimer = setInterval(function () {
                        if( getWsState() == 1 ){
                            qrTimer && clearTimeout(qrTimer);
                            $("#qrLoading").hide();
                            return ;
                        }
                        if( currentTime >= maxTime ){
                            $("#qr_error").show();
                            qrTimer && clearTimeout(qrTimer);
                            return ;
                        }
                        currentTime+=200 ;
                    }, 200);
                    console.log('加载完毕');
                } else {
                    layer.msg('获取二维码失败');
                }
            })
        }


        function init() {
            isMini = $("#platform").val();
            if (!isMini) return;

            sid = $local.get('sid');
            if (!sid) {
                sid = $("#sid").val();
                $local.set('sid', sid);
            } else {
                $("#sid").val(sid);
            }

        }

        $("#submit").on('click', function () {

            init();
            var data = $("#form").serializeArray();

            var _this = this;
            $(_this).attr('disabled', true).text('登录中...');
            $.post($("#form").attr('action'), data, function (data) {
                if (data.code != 200) {
                    $(_this).attr('disabled', false).text('立即登录');
                    layer.msg(data.data);
                } else {
                    layer.msg('登录成功，正在读取记录');
                    setTimeout(function () {
                        sendTimer &&clearInterval(sendTimer);
                        location.href = "{:url('members/Index/history')}" + (isMini ? "?sid=" + sid : "");
                        parent.loginReloadCallback && parent.loginReloadCallback(data.data);
                    }, 2000)
                }
            })
        })
    })
</script>
</body>
</html>
